<template>
	<view>
		<view class="statistics">
				<!-- <image src="../../static/logo-4.png" mode="widthFix" class="big-icon"></image> -->
				<view class="report-title">
					<text class="days">{{sum_1}}</text>
					<text class="unit">天</text>
				</view>
				<view class="sub_title">
					<text>本月签到</text>
				</view>
				
				<view class="report">
					<view class="column green">
						<text class="column-title">正常签到</text>
						<text class="number">{{sum_1}}</text>
					</view>
					<view class="column orange">
						<text class="column-title">异常签到</text>
						<text class="number">{{sum_2}}</text>
					</view>
					<view class="column red">
						<text class="column-title">缺勤签到</text>
						<text class="number">{{sum_3}}</text>
					</view>
				</view>
				<view class="calendar-container">
					<uni-calendar :insert="true" :lunar="false" :selected="list" @monthSwitch="changeMonth" @confirm="changeMonth"></uni-calendar>
				</view>
			</view>
		</view>
		
	</view>
		
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	export default {
		components:{
			uniCalendar
		},
		data() {
			return {
				list:[],
				sum_1:0,
				sum_2:0,
				sum_3:0
			}
		},
		onShow:function() {
			let that = this
			let date = new Date()
			let year = date.getFullYear()
			let month = date.getMonth()+1
			that.searchCheckin(that,year,month)
		},
		methods: {
			searchCheckin:function(ref,year,month){
				let that = ref
				that.sum_1=0
				that.sum_2=0
				that.sum_3=0
				that.list.length=0
				that.ajax(that.url.searchMonthCheckin,"POST",{year:year,month:month},function(resp){
					console.log(resp.data.list);
					for(let one of resp.data.list){
						if(one.status!=""){
							let color=""
							if(one.status=="正常"){
								color="green"
							}else if(one.status=="迟到"){
								one.status = "异常"
								color="orange"
							}else if(one.status=="缺勤"){
								color="red"
							}
							that.list.push({
								date:one.date,
								info:one.status,
								color:color
							})
						}
					}
					that.sum_1=resp.data.sum_1
					that.sum_2=resp.data.sum_2
					that.sum_3=resp.data.sum_3
				})
			},
			changeMonth:function(e){
				let that = this
				let year = e.year
				let month = e.month
				that.searchCheckin(that,year,month)
			}
		}
	}
</script>
<style lang="less">
@import url("my_checkin.less");
</style>
